<template>
  <el-drawer
    size="800px"
    class="custom-drawer"
    :visible.sync="drawer"
    :direction="direction"
    :with-header="false"
  >
    <div class="title"><h3>{{ title }}</h3></div>
    <div class="body">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1">
          <el-card class="title-card" shadow="none">
            <div slot="header" class="title-card-header">
              基本信息
            </div>
            <el-form ref="publishForm" :model="ruleForm" :rules="rules1" label-position="top" label-suffix=" :">
              <el-form-item label="工具名称" prop="name">
                <el-input v-model="ruleForm.name" />
              </el-form-item>
              <el-form-item label="工具地址" prop="jumpUrl">
                <el-input v-model="ruleForm.jumpUrl" />
              </el-form-item>

              <el-form-item label="服务厂商">
                <!--数据来源：字典下拉，字典类型：service_provider-->
                <DictSelect
                  :value="ruleForm.serviceProvider"
                  type="dict"
                  field="service_provider"
                  @change="(val) => ruleForm.serviceProvider = val"
                />
              </el-form-item>
              <el-form-item label="提供部门">
                <el-input :value="userInfo.deptName" readonly />
              </el-form-item>

              <el-form-item label="可订阅部门">
                <el-radio-group v-model="canSubscribeDeptType" style="flex-shrink: 0;margin-right: 10px">
                  <el-radio :label="1" border>全部委办局</el-radio>
                  <el-radio :label="2" border>部门委办局</el-radio>
                </el-radio-group>
                <ElSelectTree
                  v-show="isShowDeptSelect"
                  v-model="ruleForm.canSubscribeDeptId"
                  style="margin-top: 20px;min-width: 500px;"
                  :data="deptList"
                  multiple
                  node-key="id"
                  :props="{
                    label: 'deptName',
                    children: 'children'
                  }"
                  check-strictly
                />
              </el-form-item>
              <el-form-item label="工具介绍" prop="itselfDesc">
                <el-input v-model="ruleForm.itselfDesc" type="textarea" :rows="5" />
              </el-form-item>
              <el-form-item label="功能描述">
                <el-input v-model="ruleForm.functionDesc" type="textarea" :rows="5" />
              </el-form-item>
              <el-form-item label="业务场景">
                <el-input v-model="ruleForm.businessDesc" type="textarea" :rows="5" />
              </el-form-item>
            </el-form>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="详情" name="2">
          <el-card class="title-card" shadow="none">
            <div slot="header" class="title-card-header">
              详情
            </div>
            <div class="tinymce-box">
              <TEditor v-model="richText" />
            </div>
          </el-card>
        </el-collapse-item>
        <el-collapse-item v-if="drawer" title="附件上传" name="3">
          <el-card class="title-card" shadow="none">
            <div slot="header" class="title-card-header">
              附件上传
            </div>
            <DragUpload ref="dragRef" />
          </el-card>
        </el-collapse-item>
      </el-collapse>
      <div class="f-r a-c j-e" style="margin: 10px 0;">
        <el-button type="primary" @click="handleSubmit(false)">保存</el-button>
        <el-button type="primary" @click="handleSubmit(true)">保存并提交</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { mapGetters } from 'vuex'
import { http_dept, http_serve_publish_tool } from '@/api'
import TEditor from '@/components/RichEdit'
import DragUpload from '@/components/DragUpload'

export default {
  name: 'ToolForm',
  components: {
    TEditor,
    DragUpload
  },
  props: {
    title: String
  },
  computed: {
    ...mapGetters(['userInfo']),
    isShowDeptSelect() {
      if (this.canSubscribeDeptType == 1) {
        this.ruleForm.canSubscribeDeptId = []
      }
      return this.canSubscribeDeptType == 2
    },
    rules1() {
      return {
        name: [{ required: true, message: '输入不能为空' }],
        jumpUrl: [{ required: true, message: '输入不能为空' }],
        serviceProvider: [{ required: true, message: '输入不能为空' }],
        canSubscribeDeptId: [{ required: this.isShowDeptSelect, message: '输入不能为空' }]
      }
    }
  },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      activeNames: ['1', '2', '3'],
      ruleForm: {
        name: '',
        jumpUrl: '',
        serviceProvider: '',
        canSubscribeDeptId: [],
        itselfDesc: '',
        functionDesc: '',
        businessDesc: '',
        detail: ''
      },
      canSubscribeDeptType: 1,
      deptList: [],
      // 富文本
      richText: ''
    }
  },
  methods: {
    open() {
      this.drawer = true
      http_dept.tree().then(res => {
        this.deptList = res
        console.log(this.deptList)
      })
    },
    handleSubmit(isSubmit) {
      this.$refs.publishForm.validate(async(valid) => {
        if (valid) {
          const files = this.$refs.dragRef.getFiles()
          if (!files) return
          http_serve_publish_tool.create({
            submit: isSubmit
          }, {
            ...this.ruleForm,
            files
          }).then(res => {
            this.$emit('save')
            this.handleClose()
          })
        }
      })
    },
    handleClose() {
      this.drawer = false
      if (this.$refs.publishForm) {
        this.$refs.publishForm.clearValidate()
      }
    }
  }
}
</script>

<style lang="scss">
.upload-demo2 {
  .el-upload,
  .el-upload-dragger{
    width: 100%;
  }
}
</style>
